<template>
  <view class="container">
    <!-- 标题 -->
    <view class="title">我的</view>
    <!-- 菜单卡片区 -->
    <view class="menu-list">
      <view class="menu-list-item" @click="goTo('history')">
        <text class="menu-list-icon">⏲️</text>
        <text class="menu-list-label">历史记录</text>
        <text class="menu-list-arrow">›</text>
      </view>
      <view class="menu-list-item" @click="goTo('favorite')">
        <text class="menu-list-icon">⭐</text>
        <text class="menu-list-label">我的收藏</text>
        <text class="menu-list-arrow">›</text>
      </view>
      <view class="menu-list-item" @click="goTo('custom')">
        <text class="menu-list-icon">📋</text>
        <text class="menu-list-label">自定义菜谱</text>
        <text class="menu-list-arrow">›</text>
      </view>
    </view>
    <view style="flex:1" />
    <!-- 底部导航栏 -->
    <view class="tabbar">
      <view class="tabbar-item" @click="goTo('index')">
        <text class="tabbar-emoji">🏠</text>
        <text class="tabbar-label">首页</text>
      </view>
      <view class="tabbar-item" @click="goTo('recipe-test')">
        <text class="tabbar-emoji">🍽️</text>
        <text class="tabbar-label">吃什么</text>
      </view>
      <view class="tabbar-item active">
        <text class="tabbar-emoji">👤</text>
        <text class="tabbar-label">我的</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    goTo(page) {
      if (page === 'index') {
        uni.reLaunch({ url: '/pages/index/index' })
      } else if (page === 'recipe-test') {
        uni.redirectTo({ url: '/pages/recipe-test/recipe-test' })
      } else if (page === 'my') {
        uni.redirectTo({ url: '/pages/my/my' })
      } else if (page === 'history') {
        uni.navigateTo({ url: '/pages/history/history' })
      } else if (page === 'favorite') {
        uni.navigateTo({ url: '/pages/favorite/favorite' })
      } else if (page === 'custom') {
        uni.navigateTo({ url: '/pages/custom-recipe/custom-recipe' })
      }
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #f7f7f7;
}
.title {
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  margin: 32rpx 0 32rpx 0;
}
.menu-row { display: none; }
.menu-list {
  display: flex;
  flex-direction: column;
  padding: 0 24rpx;
  gap: 18rpx;
}
.menu-list-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: #fff;
  border-radius: 14rpx;
  box-shadow: 0 2rpx 8rpx #e0e0e0;
  padding: 24rpx 20rpx;
  cursor: pointer;
  transition: box-shadow 0.2s;
}
.menu-list-icon {
  font-size: 28px;
  margin-right: 18rpx;
}
.menu-list-label {
  font-size: 18px;
  color: #222;
  flex: 1;
}
.menu-list-arrow {
  font-size: 22px;
  color: #bbb;
  margin-left: 8rpx;
}
.tabbar {
  display: flex;
  flex-direction: row;
  height: 100rpx;
  background: #fff;
  border-top: 2rpx solid #E0E0E0;
}
.tabbar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #888;
  font-size: 14px;
}
.tabbar-item.active {
  color: #1976D2;
  font-weight: bold;
}
.tabbar-emoji {
  font-size: 24px;
}
.tabbar-label {
  font-size: 12px;
  margin-top: 4rpx;
}
</style> 